<docs>
  ## 职位管理页面
</docs>
<template>
  <div class="con-layout vocationList">
    <my-bread title="职位管理"></my-bread>
    <div class="content">
      <list-bar class="useListBar">
        <div
          class="list-bar-item"
          v-for="(item,index) in listBar"
          :key="index"
          :class="curIndex == index? 'active' :''"
          @click="triggerBar(item)"
        >
          <span>
            {{item.name}}
            <i v-if="item.dot>0">{{item.dot}}</i>
          </span>
        </div>
      </list-bar>
      <router-view></router-view>
      <div class="release-btn" @click="link">发布新职位</div>
    </div>
  </div>
</template>

<script>
import listBar from "base/listBar/listBar";
export default {
  components: { listBar },
  data() {
    return {
      listBar: [
        { name: "正在招聘", resid: "zzzp", dot: "", index: 0 },
        { name: "待审核", resid: "dsh", dot: "", index: 1 },
        { name: "审核退回", resid: "shth", index: 2 },
        { name: "已停招", resid: "ytz", index: 3 }
      ],
      curIndex: 0
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.name == "inProgress") {
          this.curIndex = 0;
        } else if (val.name == "toBeReviewed") {
          this.curIndex = 1;
        } else if (val.name == "return") {
          this.curIndex = 2;
        } else if (val.name == "stopCall") {
          this.curIndex = 3;
        }
        this.init();
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    init() {
      this.$http({
        url: "/dwgl/zpslCx"
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          let data = _res.zpsl;
          this.listBar[0].dot = data.zpzsl;
          this.listBar[1].dot = data.dshsl;
        } else {
          this.$alert({
            message: _res.message
          });
          return false;
        }
      });
    },
    // listBar切换事件
    triggerBar(item) {
      this.curIndex = item.index;
      if (this.curIndex == 0) {
        this.$router.replace({ name: "inProgress" });
      } else if (this.curIndex == 1) {
        this.$router.replace({ name: "toBeReviewed" });
      } else if (this.curIndex == 2) {
        this.$router.replace({ name: "return" });
      } else if (this.curIndex == 3) {
        this.$router.replace({ name: "stopCall" });
      }
    },
    //发布新职位
    link(){
      this.$router.push({name:'vocationDetail'});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~common/scss/var.scss";

.vocationList {
  .useListBar {
    position: fixed;
    top: $height-input;
    left: 0;
    z-index: 10;
    width: 100%;
  }
  .content {
    padding-top: 110px;
    padding-bottom: 116px;
  }
  .release-btn {
    position: fixed;
    bottom: 150px;
    left: 34px;
    right: 34px;
    z-index: 2;
    text-align: center;
    background-color: #06a8f6;
    border-radius: 6px;
    color: #ffffff;
    font-size: 33px;
    padding: 26px 0;
  }
}
</style>
